讓我們在原有的網頁結構上，開始添加網頁中最重要的內容。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: gray;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
max-width: 1024px;
margin: 0 auto;
}
.header {
/* min-height: 100px; */
background-color: lightskyblue;
}
.header-title {
padding: 8px 0 8px 16px;
}
.main {
flex-grow: 1;
background-color: lightgrey;
padding: 16px 0;
}
.main-section {
padding: 0 16px;
margin: 0 0 16px;
}
.main-section-projects {
padding: 8px 0 0 16px;
}
.main-section-projects-item {
padding: 8px 0;
}
.footer {
/* min-height: 100px; */
background-color: lightslategray;
}
.footer-text {
padding: 8px 0;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1 class="header-title">My Blog</h1>
</header>
<main class="main">
<section class="main-section">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
</section>
<section class="main-section">
<h2>Contact</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
</section>
<section class="main-section">
<h2>Experience</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
</section>
<section class="main-section">
<h2>Education</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
</section>
<section class="main-section">
<h2>Skills</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
</section>
<section class="main-section">
<h2>Projects</h2>
<div class="main-section-projects">
<section class="main-section-projects-item">
<h3>Project 1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
</section>
<section class="main-section-projects-item">
<h3>Project 2</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
</section>
<section class="main-section-projects-item">
<h3>Project 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
</section>
</div>
</section>
</main>
<footer class="footer">
<p class="footer-text">Copyright © 2024 My Blog</p>
</footer>
</div>
</body>
</html>
iThome鐵人賽
看影片追技術